import { Link } from '@brillout/docpress'
import { PageHeader, UseScaffolder, UiFrameworkExtension } from '../../components'

<PageHeader>
Version history: [`CHANGELOG.md`](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)  
Examples: <Link href="/new">vike.dev/new</Link> and [`examples/`](https://github.com/vikejs/vike-react/tree/main/examples)  
Source code: [GitHub > `vikejs/vike-react`](https://github.com/vikejs/vike-react)  
</PageHeader>

The <Link href="/extensions">Vike extension</Link> `vike-react` is a full-fledged [React](https://react.dev) integration, with a high-level DX like a conventional framework such as Next.js or React Router.

The documentation for using `vike-react` can be found throughout this website (`vike.dev`).

> The guides, such as <Link href="/data-fetching" />, assume you're using Vike with <UiFrameworkExtension name noLink comma />. If you aren't then see the sections `Without vike-{react,vue,solid}` such as <Link href="/useData#without-vike-react-vue-solid" />.

> You can integrate React yourself instead of using `vike-react`, see <Link href="/react#custom-integration" />.

Notes about [RSC](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components):
- <Link href="/react#react-server-components" doNotInferSectionTitle />


## Scaffold new `vike-react` app

Use <Link href="/new">vike.dev/new</Link> for creating a new `vike-react` app.


## Add `vike-react` to existing Vike app

To add `vike-react` to an existing Vike app: install the `vike-react` npm package (e.g. `$ npm install vike-react`) then extend your existing `+config.js` file (or create one) with `vike-react`:

```ts
// /pages/+config.ts

import type { Config } from 'vike/types'
import vikeReact from 'vike-react/config'// [!code ++]

export default {
  // ...
  extends: [vikeReact]// [!code ++]
} satisfies Config
```

You can then use <Link href="#under-the-hood">new settings introduced by `vike-react`</Link>:

```ts
// /pages/+config.ts

import type { Config } from 'vike/types'
import vikeReact from 'vike-react/config'

export default {
  // ...

  // Setting to toggle SSR// [!code ++]
  ssr: false,// [!code ++]

  extends: [vikeReact]
} satisfies Config
```

See also:
- <Link href="/add" />


## Under the hood

The `vike-react` extension is only [around 1k lines of code](https://gist.github.com/brillout/6267ecb8c996fb4a401985106cc81936).
It's simple, readable, and highly polished.

Reading the [source code of `vike-react`](https://github.com/vikejs/vike-react) is very much an option for understanding, debugging, and/or contributing.

> Contributions are welcome! See [CONTRIBUTING.md](https://github.com/vikejs/vike-react/blob/main/CONTRIBUTING.md) to get started.

What `vike-react` does is essentially this:
- Sets <Link href="/hooks">Vike hooks</Link> and <Link href="/settings">Vike settings</Link> on your behalf.
  > Most notably:
  > - <Link href="/onRenderHtml">`onRenderHtml()`</Link>
  >   (see [integration/onRenderHtml.tsx](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/src/integration/onRenderHtml.tsx))
  > - <Link href="/onRenderClient">`onRenderClient()`</Link>
  >   (see [integration/onRenderClient.tsx](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/src/integration/onRenderClient.tsx))
  > <p/> {/* MDX bug workaround */ }
- Creates new Vike settings and new Vike hooks. (By using <Link href="/meta" />.)
  > For example <Link href="/Layout">`<Layout>`</Link> and <Link href="/ssr">`ssr`</Link>.
- Implements React component hooks.
  > For example <Link href="/useData">`useData()`</Link> and <Link href="/usePageContext">`usePageContext()`</Link>.
- Uses [`react-streaming`](https://github.com/brillout/react-streaming) for <Link href="/streaming">HTML Streaming</Link>.

It implements the following:

- <Link noBreadcrumb href="/useData" />
- <Link noBreadcrumb href="/usePageContext" />
- <Link noBreadcrumb href="/Layout" />
- <Link noBreadcrumb href="/Wrapper" />
- <Link noBreadcrumb href="/ssr" />
- <Link noBreadcrumb href="/stream" />
- <Link noBreadcrumb href="/clientOnly" />
- <Link noBreadcrumb href="/reactStrictMode" />
- <Link noBreadcrumb href="/onBeforeRenderClient" />
- <Link noBreadcrumb href="/onAfterRenderClient" />
- <Link noBreadcrumb href="/Head" />
- <Link noBreadcrumb href="/title" />
- <Link noBreadcrumb href="/description" />
- <Link noBreadcrumb href="/image" />
- <Link noBreadcrumb href="/favicon" />
- <Link noBreadcrumb href="/viewport" />
- <Link noBreadcrumb href="/lang" />
- <Link noBreadcrumb href="/htmlAttributes" />
- <Link noBreadcrumb href="/bodyAttributes" />
- <Link noBreadcrumb href="/headHtmlBegin" />
- <Link noBreadcrumb href="/headHtmlEnd" />
- <Link noBreadcrumb href="/bodyHtmlBegin" />
- <Link noBreadcrumb href="/bodyHtmlEnd" />

> For a better overview, see the following lists instead. (They also include all settings and hooks created by `vike-react`.)
> - <Link href="/settings" />
> - <Link href="/hooks" />



## See also

- [GitHub > `vikejs/vike-react`](https://github.com/vikejs/vike-react)
- [GitHub > `vikejs/vike-react` > `CHANGELOG.md`](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)
- [GitHub > `vikejs/vike-react` > `examples/`](https://github.com/vikejs/vike-react/tree/main/examples)
- <Link href="/react" />
- <Link href="/vike-vue" />
- <Link href="/vike-solid" />
